<template>
  <view class="modal">
    <view class="modal-mask" @click="handleCancel"></view>
    <view class="modal-content">
      <input class="modal-input" type="text" placeholder="请输入公钥ID" v-model="publicKey" />
      <input class="modal-input" type="text" placeholder="请输入Key" v-model="coze_privateKey" />
      <!-- <view class="upload-btn" @click="handleUpload">
        <text class="upload-text">{{ privateKeyName || '+ 请上传私钥文件' }}</text>
      </view> -->
      <!-- <view class="help-link">
        <text class="help-text" @click="handleHelp">如何创建授权应用？</text>
      </view> -->
      <view class="modal-buttons">
        <view class="btn cancel-btn" @click="handleCancel">取消</view>
        <view class="btn confirm-btn" @click="handleConfirm">确定</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const emit = defineEmits(['confirm', 'cancel'])

const publicKey = ref('')
const coze_privateKey = ref('')
const privateKeyFile = ref(null)
const privateKeyName = ref('')

const handleCancel = () => {
  emit('cancel')
}
onMounted(()=>{
	let OauthObj = uni.getStorageSync('oauth');
	if(OauthObj){
		coze_privateKey.value = OauthObj.coze_privateKey;
		publicKey.value = OauthObj.publicKey;
	}
})
const handleConfirm = () => {
  if (!publicKey.value || !coze_privateKey.value ) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  uni.setStorageSync('oauth',{
    publicKey: publicKey.value,
    coze_privateKey: coze_privateKey.value,
    privateKey: privateKeyFile.value
  })
  emit('confirm', {
    publicKey: publicKey.value,
    coze_privateKey: coze_privateKey.value,
    privateKey: privateKeyFile.value
  })
}

const handleUpload = () => {
  // #ifdef MP-WEIXIN
  wx.chooseMessageFile({
    count: 1,
    type: 'file',
    extension: ['.key', '.pem', '.txt'],
    success: (res) => {
      const file = res.tempFiles[0]
      privateKeyName.value = file.name
      
      // 读取文件内容
      const fileSystemManager = wx.getFileSystemManager()
      fileSystemManager.readFile({
        filePath: file.path,
        encoding: 'utf8',
        success: (readRes) => {
          privateKeyFile.value = readRes.data
        },
        fail: (err) => {
          uni.showToast({
            title: '文件读取失败',
            icon: 'none'
          })
          console.error('文件读取失败：', err)
        }
      })
    },
    fail: (err) => {
      uni.showToast({
        title: '文件选择失败',
        icon: 'none'
      })
      console.error('文件选择失败：', err)
    }
  })
  // #endif
  
  // #ifdef H5
  uni.chooseMessageFile({
    count: 1,
    type: 'file',
    extension: ['.key', '.pem', '.txt'],
    success: (res) => {
      const file = res.tempFiles[0]
      privateKeyName.value = file.name
      
      // 使用 FileReader 读取文件内容
      const reader = new FileReader()
      reader.onload = (e) => {
        privateKeyFile.value = e.target.result
      }
      reader.readAsText(file.file)
    },
    fail: (err) => {
      uni.showToast({
        title: '文件选择失败',
        icon: 'none'
      })
      console.error('文件选择失败：', err)
    }
  })
  // #endif
}

const handleHelp = () => {
  emit('handleHelp')
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}

.modal-input {
  width: 90%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.upload-btn {
  width: 97%;
  height: 80rpx;
  border: 2rpx dashed #00C853;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.upload-text {
  color: #00C853;
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.help-link {
  text-align: center;
  margin-bottom: 30rpx;
  position: relative;
  height: 60rpx;
}

.help-text {
  color: #00C853;
  font-size: 26rpx;
  text-decoration: underline;
  position: absolute;
  right: 5rpx;
  
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background: #00C853;
  color: #fff;
}
</style> 